<template>
  <div class="line-echart">
    <base-chart :options="options" :height="height" />
  </div>
</template>

<script setup>
import BaseChart from '@/base-ui/echart/base-chart.vue'
import { computed } from 'vue'

const props = defineProps({
  height: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  xLabels: {
    type: Array,
    default: () => []
  },
  yValues: {
    type: Array,
    default: () => []
  }
})

const options = computed(() => {
  let name =[]
  let services = []
  props.yValues.forEach(item=>{
    name.push(String(item.no))
    let itemData =[]
    item.lines.forEach(e=>{
      itemData.push(e.r)
    })
    services.push({
            name: String(item.no) ,
            type: 'line',
            data:itemData
    })

  })
  return {
    title: {
        text: '',
         top: '5%',
    	  x: 'center',
    	  textStyle:{
    	  	color:'#151E26',
    	  	fontSize:14,
    	  	fontWeight:'normal',
    	  }
    },
    tooltip: {
        trigger: 'axis'
    },
	legend: {
		data: name,

	},
    grid: {
        top: '15%',
        width: '85%',
        bottom: '10%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: props.xLabels,
        axisLabel: {
          color: 'rgba(21, 30, 38, .7)'
        },
    	axisTick: {
			show: false
		},
		axisLine: {
		    show: true,
			lineStyle: {
				color: 'rgba(241, 241, 241, .7)'
			}
		}
    },
    yAxis: {
        type: 'value',
        name: '',
		nameTextStyle: {
			color: 'rgba(21, 30, 38, .7)'
		},
        axisLabel: {
          color: 'rgba(21, 30, 38, .7)'
        },
		axisLine: {
		    show: true,
			lineStyle: {
				color: 'rgba(241, 241, 241, .7)'
			}
		},
		splitLine: {
			show: true,
			lineStyle: {
				type: 'dashed',
				color: 'rgba(241, 241, 241, .7)'
			}
		}
    },
    series: services
}
})
</script>

<style lang="less" scoped>
.line-echart {
  height: 100%;
}
</style>
